<script>
import * as signalR from "@microsoft/signalr";
import SideBar from "./components/SideBar.vue";

export default{
    data() {
        return {
          bgSrc:""
        };
    },
    methods: {
      initCvs(){
        var c = this.$refs.cvs;
        var i = this.$refs.bg;
        c.style.width = i.clientWidth+"px";
        c.style.height = i.clientHeight+"px";
        c.width = i.clientWidth;
        c.height = i.clientHeight;
        this.cvsWidth = i.clientWidth;
        this.cvsHeight = i.clientHeight;
        this.ctx=c.getContext("2d");
      }
    },
    mounted() {
        const url = import.meta.env.VITE_BASEURL;
        var connection = new signalR.HubConnectionBuilder().withUrl(url)
          .withAutomaticReconnect().build();
        this.conn = connection;
        this.$refs.sideBar.init(connection)

        const page = this;
        this.conn.on("InitCanvas",(cvsInitData)=>{
          page.src = cvsInitData.bgSrc;
          page.initCvs()
        })
    },
    components: { SideBar }
}
</script>

<template>
  <div class="main">
    <img :src="bgSrc" ref="bg"/>
    <canvas ref="cvs"></canvas>
  </div>
  <SideBar ref="sideBar"></SideBar>
</template>

<style scoped>
.main{
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
canvas{
  position: absolute;
}
</style>
